<template>
<div class="view_container">
    <van-nav-bar
        :title="$route.meta.title"
        :fixed = 'true'
        :placeholder ="true">
    </van-nav-bar>
    <div class="search">
        <van-field 
            v-model="queryParams.customerName" 
            placeholder="请选择集团"
            readonly
            @click="selectGroup"/>
        <van-icon 
            name="arrow-down"
            @click="selectGroup"/>
        <van-button 
            type="default"
            @click="()=>{
                queryParams.page = 0;
                getDataList();
            }">
            查询
        </van-button>
    </div>
    <div class="top">
        <van-search 
            v-model="queryParams.customerPhone" 
            shape="square" 
            placeholder="请输入虚拟号码"
            input-align="center"
            @clear="()=>{
                queryParams.page = 0;
                getDataList();
            }"
            @search="()=>{
                queryParams.page = 0;
                getDataList();
            }"/>
    </div>
    <ScrollElCp 
        class="container"
        height="calc(var(--clientHeight) - 46px - 45px - 45px - 15px - 15px - 15px - 60px)"
        width="100%">
        <van-list
            v-model="loading"
            :finished="finished"
            :error="error"
            error-text="请求失败"
            :finished-text="flattenTwoList(pageData).length==0?'什么也没找到':'没有更多了'"
            @load="getDataList"
            :immediate-check="false">
            <DataInfoItem
                v-for="(item,index) in flattenTwoList(pageData)"
                :key="index"
                :index='index'
                :itemData="item"
                @click.native="showInfo(item)">
            </DataInfoItem>
        </van-list>
    </ScrollElCp>
    <DataInfoDialog
        ref="DataInfoDialog">
    </DataInfoDialog>
    <SelectGroup
        ref="SelectGroup"
        @change="onSelect">
    </SelectGroup>
</div>
</template>
<script>
//短信查询页面
import {flattenTwoList} from "@/common/OtherTools";
import DataInfoItem from "@/components/home/DataInfoItem";
import DataInfoDialog from "@/components/home/DataInfoDialog";
import SelectGroup from "@/components/public/SelectGroup";
export default {
    name: 'Home',
    components: {
        DataInfoItem,
        DataInfoDialog,
        SelectGroup,
    },
    data(){
        return {
            loading: false,
            show:false,
            finished:false,
            error:false,
            pageData:[],
            queryParams: {  //查询条件
                customerName:'',
                page: 0,
                size: 10,
                customerPhone:'',
            },
        };
    },
    methods:{
        flattenTwoList,
        selectGroup(){  //显示选择集团组件
            this.$refs.SelectGroup.initData({
                show:true,
            });
        },
        onSelect(name) {
            this.queryParams.customerName = name;
            this.queryParams.page = 0;
            this.getDataList();
        },
        getDataList(){
            this.queryParams.page++;
            this.error = false;
            this.loading = true;
            this.finished = false;
            this.$Api.getCustomers(
                this.queryParams,
            ).then((res) => {
                let dataList = res.data.list;
                this.queryParams.page = res.data.page;
                this.$set(this.pageData,this.queryParams.page-1,dataList);  //索引必须是页数减一
                this.pageData.length = this.queryParams.page;  //数组的长度必须和页数对应
                this.total = res.data.totalSize;
                if(this.queryParams.page >= res.data.totalPage){  //如果是最后一页
                    this.finished = true;
                }
            }).catch(res=>{
                this.pageData[this.queryParams.page] = [];
                this.queryParams.page--;
                this.error = true;
                this.$notify({
                    type: 'danger',
                    message: res.msg,
                    duration: 1000,
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
        showInfo(item){  //查看数据详情
            this.$refs.DataInfoDialog.initData({
                show:true,
                customerId:item.customerId,
                customerName:item.customerName,
            });
        },
    },
}
</script>
<style scoped lang="scss">
.view_container {
    background-color: #f0f2f5;
    height: calc(var(--clientHeight) - 60px);
    padding:15px;
    padding-top: 0;
    box-sizing: border-box;
    display: grid;
    grid-gap: 15px;
    >.search{
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 100px;
        overflow: hidden;
        /deep/div{
            flex:7;
        }
        /deep/i{
            flex:1;
        }
        /deep/button{
            flex:1;
            color: rgb(3, 125, 206);
        }
        /deep/.van-action-sheet__cancel{
            color: red;
            font-weight: bold;
            background-color: #efefef;
        }
    }
    .top {
        width: 100%;
        display: flex;
        align-items: center;
        height: 45px;
        /deep/ .van-search {
            padding: 5px 0 !important;
            background-color: white;
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
        /deep/ .van-search__content {
            background-color: #fff;
        }
    }
    .container {
        overflow: auto;
        border-radius: 10px;
        /deep/.van-list{
            display: grid;
            grid-gap: 10px;
        }
        /deep/.img_container{
            width: 100%;
            padding: 50px 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                width: 100px;
                margin-bottom: 15px;
            }
        }
    }
}
</style>
